<template>
  <div ref="chart"
       class="chart">
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {
      cityProductionList: [{
        name: '云浮罗定',
        value: 75
      }, {
        name: '佛山',
        value: 54
      }, {
        name: '肇庆',
        value: 45
      }
        , {
        name: '广州番禺',
        value: 47
      }, {
        name: '其他',
        value: 65
      }]
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    load () {
      this.$nextTick(() => {
        this.drawChart()
      })
    },
    drawChart () {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '产量（吨）',
            type: 'pie',
            roseType: 'radius', // 设置为半径模式的玫瑰图  
            radius: ['15%', '70%'], // 设置内外半径的范围，外半径可以自定义，内半径通常设置较小值以形成环形  
            center: ['50%', '50%'],
            label: {
              show: true,
              formatter: '{b}\n{c} ({d}%)'
            },
            labelLine: {
              show: true
            },
            color: ['#FF5733', '#33FFB5', '#3366FF', '#929732','#235897'], // 可以自定义你喜欢的鲜艳颜色
            data: this.cityProductionList.map(item => {
              return {
                value: item.value,
                name: item.name,
              }
            })
          }
        ]
      }
      myChart.setOption(option);
      //根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);
    }
  }
}
</script>

<style scoped>
.chart {
  width: 28vw;
  height: 23vh;
}
</style>